<template>
    <div class="box">
        <div class="huan" id="h1">

        </div>
        <div class="huan" id="h2">

        </div>
        <div class="huan" id="h3">

        </div>
        <div class="huan" id="h4">

        </div>
        <div class="region">
            <div class="tu" id="tu">

            </div>
            <div class="biao">
                 <a-table :dataSource="dataSource" :columns="columns" :bordered="true"
                />
            </div>
        </div>
        <div class="gangwei">
            <div class="tu" id="tu1">

            </div>
            <div class="biao">
                <a-table :dataSource="dataSource1" :columns="columns1" :bordered="true"
                />
            </div>
        </div>
        <div class="huoyue" id="huoyue">

        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core'
import * as echarts from 'echarts';
export default {
    setup(){

        let obj = reactive({
            dataSource: [
                {
                    key: 1,
                    age: 20,
                    address: '',
                },
                {
                    key: 2,
                    age: 12,
                    address: '',
                },
                {
                    key: 3,
                    age: 7,
                    address: '',
                },
                {
                    key: 4,
                    age: 7,
                    address: '',
                },
                {
                    key: 5,
                    age: 5,
                    address: '',
                },
                {
                    key: 6,
                    age: 5,
                    address: '',
                },
                {
                    key: 7,
                    age: 4,
                    address: '',
                },
            ],
             columns: [
                {
                    title: '排名',
                    dataIndex: 'key',
                    key: 'key',
                },
                {
                    title: '地区',
                    dataIndex: 'address',
                    key: 'address',
                },
                {
                    title: '人数',
                    dataIndex: 'age',
                    key: 'age',
                },
            ],
            dataSource1: [
                {
                    key: 1,
                    age: 21,
                    address: '服务员111',
                },
                {
                    key: 2,
                    age: 9,
                    address: '文员',
                },
                {
                    key: 3,
                    age: 8,
                    address: '销售代表',
                },
                {
                    key: 4,
                    age: 7,
                    address: '家具',
                },
                {
                    key: 5,
                    age: 5,
                    address: '人事经理',
                },
                {
                    key: 6,
                    age: 5,
                    address: '职位一级分类',
                },
                {
                    key: 7,
                    age: 5,
                    address: '人力',
                },
            ],
            columns1: [
                {
                    title: '排名',
                    dataIndex: 'key',
                    key: 'key',
                },
                {
                    title: '岗位',
                    dataIndex: 'address',
                    key: 'address',
                },
                {
                    title: '人数',
                    dataIndex: 'age',
                    key: 'age',
                },
            ],
        })

        onMounted(()=>{
            show()
            show1()
            show2()
            show3()
            show4()
            show5()
            show6()
        })

        const show=()=>{
            var chartDom = document.getElementById('h1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title:{
                    text: '性别分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 75, name: '男' },
                        { value: 25, name: '女' },
                    ]
                    }
                ]
                };
            option && myChart.setOption(option);
        }

        const show1=()=>{
            var chartDom = document.getElementById('h2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title:{
                    text: '年龄分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 10, name: '16-20岁' },
                        { value: 30, name: '21-30岁' },
                        { value: 20, name: '31-40岁' },
                        { value: 10, name: '41-50岁' },
                        { value: 30, name: '50岁以上' },
                    ]
                    }
                ]
                };
            option && myChart.setOption(option);
        }
        const show2=()=>{
            var chartDom = document.getElementById('h3');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title:{
                    text: '学历分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 25, name: '初中' },
                        { value: 10, name: '高中' },
                        { value: 3, name: '中技' },
                        { value: 5, name: '中专' },
                        { value: 15, name: '大专' },
                        { value: 30, name: '本科' },
                        { value: 5, name: '硕士' },
                        { value: 2, name: '博士' },
                        { value: 5, name: '博后' },
                    ]
                    }
                ]
                };
            option && myChart.setOption(option);
        }
        const show3=()=>{
            var chartDom = document.getElementById('h4');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title:{
                    text: '经验分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 5, name: '应届生' },
                        { value: 40, name: '一年' },
                        { value: 8, name: '二年' },
                        { value: 2, name: '三年' },
                        { value: 5, name: '三年-五年' },
                        { value: 20, name: '五年-十年' },
                        { value: 20, name: '十年以上' },
                    ]
                    }
                ]
                };
            option && myChart.setOption(option);
        }

        const show4=()=>{
            var chartDom = document.getElementById('tu');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'意向地区分布'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                    }
                ]
            };

            option && myChart.setOption(option);
        }
        const show5=()=>{
            var chartDom = document.getElementById('tu1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'意向岗位分布'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [220, 500, 150, 80, 50,310, 230],
                    type: 'bar'
                    }
                ]
            };

            option && myChart.setOption(option);
        }

        const show6=()=>{
            var chartDom = document.getElementById('huoyue');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '求职者活跃度分析'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['登录数', '会员刷新(人数)', '简历刷新(次数)', '简历投递数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['11/01', '11/02', '11/03', '11/04', '11/05', '11/06', '11/07','11/08',"11/09",'11/10','11/11','11/12','11/13']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name: '登录',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0,0,80,0,0,0,0]
                    },
                    {
                    name: '会员刷新(人数)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0]
                    },
                    {
                    name: '简历刷新(次数)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0]
                    },
                    {
                    name: '简历投递数',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0]
                    }
                ]
                };

                option && myChart.setOption(option);
        }



        return {
            ...toRefs(obj)
        }
    }
}
</script>

<style scoped>
.box{
    width: 98%;
    height: 100%;
    margin: 0 auto;
}
.huan{
    width: 23%;
    height: 200px;
    background: #f2f2f2;
    display: inline-block;
    margin: 10px 1%;
}
.region{
    width: 100%;
    height: 200px;
    background: #f2f2f2;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
        background: #f2f2f2;
}
.gangwei{
    width: 100%;
    height: 200px;
    background: #f2f2f2;
    margin-bottom: 20px;
        display: flex;
    justify-content: space-between;
        background: #f2f2f2;
}
.tu{
    width: 60%;
    height: 100%;
    margin-right: 5%;
}
.biao{
    width: 35%;
    height: 100%;
    overflow-y: scroll;
}
.huoyue{
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    background: #f2f2f2;
}
</style>